<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Product List</title>
    <style>
      /* 通用样式 */
      body {
        font-family: Arial, sans-serif;
        background-color: #f2f2f2;
        margin: 0;
        padding: 0;
      }
      
      .container {
        max-width: 1200px;
        margin: auto;
        padding: 20px;
      }
      
      h1 {
        text-align: center;
        margin-top: 50px;
      }
      
      table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 50px;
      }
      
      th, td {
        text-align: left;
        padding: 10px;
      }
      
      th {
        background-color: #4CAF50;
        color: white;
      }
      
      tr:nth-child(even) {
        background-color: #f2f2f2;
      }
      
      tr:hover {
        background-color: #e6e6e6;
      }
      
      /* 特定样式 */
      .product-image {
        width: 100px;
        height: 100px;
      }
      
      .status-draft {
        color: gray;
      }
      
      .status-published {
        color: green;
        font-weight: bold;
      }
      
      .status-archived {
        color: red;
        font-weight: bold;
      }

      ul.pagination {
          display: inline-block;
          padding: 0;
          margin: 0;
      }

      ul.pagination li {display: inline;}

      ul.pagination li a {
          color: black;
          float: left;
          padding: 8px 16px;
          text-decoration: none;
          border-radius: 5px;
      }

      ul.pagination li a.active {
          background-color: #4CAF50;
          color: white;
          border-radius: 5px;
      }

      ul.pagination li a:hover:not(.active) {background-color: #ddd;}
          </style>
  </head>

  <body>
    <div class="container">
      <h1>Product List</h1>

      <form action="{$Request.url}" method="get">  
       名称： <input type="text" required="required" placeholder="名称" name="keyword" value="{$Request.param.keyword}"></input>  
  
        <button class="but" type="submit">搜索</button>  
     </form> 
     <a href="{:url('admin/banners/create')}">新增</a>
      <table>
        <thead>
          <tr>
            <th>id</th>
            <th>Name</th>
            <th>Slug</th>
            <th>Image</th>
            <th>Order</th>
            <th>Status</th>
            <th>Created At</th>
            <th>Created UID</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
            {foreach $list as $v}
                <tr>
                    <td>{$v.id}</td>
                    <td><a href="{:url('admin/banners/read' , ['id' => $v.id ])}">{$v.name}</a></td>
                    <td>{$v.slug}</td>
                    <td><img class="product-image" src="{$v.image}"></td>
                    <td>{$v.order}</td>
                    <td class="status-draft">{$v.status}</td>
                    <td>{$v.created_at}</td>
                    <td>{$v.created_uid}</td>
                    <td><a href="{:url('admin/banners/edit',['id' => $v.id])}">修改</a>
                      <a href="javascript:void(0)" onclick="if(confirm('确认删除？')) location.href='{:url(\'admin/banners/delete\',[\'id\' => $v.id])}'">删除</a></td>
                </tr>
            {/foreach}
            
        </tbody>
      </table>
      <div>
        {$list->render()}
      </div>
     
    </div>
  </body>
</html>

